<template>
    <div id="lunbo">
        <div class="container">
            <el-carousel :interval="4000" type="card" height="460px">
                <el-carousel-item v-for="item in bannerList" :key="item.id">
                    <div class="imgbox">
                        <img :src="item.pic" class="ban" alt="轮播海报 800 * 460">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                bannerList: []
            }
        },
        computed: {
            
        },
        mounted () {
            this.getLunbo();
        },
        methods: {
            // 获取轮播
            async getLunbo() {
                this.bannerList = []
                let res = await this.$axios.post("/port/index/carousel", { key: this.$key })
                //console.log(res);
                let arr = res.data.data
                let code = res.data.code
                if (code == 200) {
                    arr.forEach( el => {
                        if (el.site == "2") {
                            this.bannerList.push(el)
                        }
                    })
                }
            },
        },
    }
</script>

<style lang="scss" scoped>

#lunbo {
    width: 100%;
    box-sizing: border-box;
    .container {
        width: 1200px;
        box-sizing: border-box;
        margin: 20px auto;
        text-align: center;
        .imgbox {
            width: 600px;
            height: 460px;
            overflow: hidden;
            border: 1px solid  #000;
            img.ban {
                width: 600px;
                height: 460px;
                display: block;
            }
        }
    }

}
</style>